<template>
  <div class style="height: 100%;" id="reyuanid">
    <div
      class="reyuantable"
      :style="{'--titlefont': datatablestyless.titlefontSize,'--px80i': datatablestyless.px80i,'--px20i': datatablestyless.px80i,'--px40i': datatablestyless.px40i,'--contentfont': datatablestyless.contentfontSize}"
    >
      <dv-scroll-board :config="config" :style="{height: reyuanth}" class="tableconfig" />
    </div>
  </div>
</template>
<script>
import axios from "@/utils/requestzz";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";

export default {
  name: "datatablereyuan1111",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      reyuanth: 100,
      config: {
        header: [],
        data: [],
        rowNum: 15,
        headerBGC: "#11183C99",
        oddRowBGC: "#040A2199",
        evenRowBGC: "#21284399",
        // index: true
        columnWidth: [
          250 * this.$root.setting.scale,
          110 * this.$root.setting.scale,
          110 * this.$root.setting.scale,
          160 * this.$root.setting.scale,
        ],
        align: ["center"],
      },
      hpObjArr: [],
    };
  },
  computed: {
    scaal() {
      return navigator.userAgent.indexOf("Firefox") > 0
        ? 0
        : this.$root.setting.scale * 50;
    },
  },
  watch: {
    "$store.state.daping.bigScreen": {
      handler: function (n, o) {
        let n_tmp = n;
        let g_bigscreen_data_arr = n_tmp.filter((item) => {
          if (item.attrName == "heatplant_pids") {
            return true;
          }
        });
        var hpObjArr = [];
        var hpPidArr = [];
        var pidStrArr = g_bigscreen_data_arr[0].attrValue.split(","); //【2019年12月2日】在大屏配置页面勾选的热源 并且按照顺序传输过来
        for (var i = 0; i < pidStrArr.length; i++) {
          // var type = pidStrArr[i].split("@@")[0];
          var pid = pidStrArr[i].split("@@")[1];
          var name = pidStrArr[i].split("@@")[2];
          hpPidArr.push(pid);
          hpObjArr.push({
            pid: pid,
            name: name,
          });
        }
        this.hpObjArr = hpObjArr;
      },
    },

    "$store.state.daping.reyuantable": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {},
  methods: {
    loadData(data200) {
      var h = document.getElementById("reyuanid").clientHeight;
      this.reyuanth = h;

      let hpObjArr = this.hpObjArr;
      let _this = this;

      this.config.header = [
        "热源名称",
        "供温(℃)",
        "回温(℃)",
        "流量(t/h)",
        "热量(MW)",
        "供压(MPa)",
        "回压(MPa)",
      ];
      // this.config.header = this.componentDetail.content.header;
      //异步获取数据
      //setinterval  或者websocket
      //设置option
      //如果有则获取200中的结果
      for (var i in hpObjArr) {
        for (var j in data200) {
          if (hpObjArr[i]["pid"] == data200[j]["pid"]) {
            hpObjArr[i]["aligntime"] = data200[j]["aligntime"]
              ? new Date(data200[j]["aligntime"]).getTime()
              : undefined;
            hpObjArr[i]["m_001t"] =
              data200[j]["m_001t"] || data200[j]["m_001t"] == 0
                ? data200[j]["m_001t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_002t"] =
              data200[j]["m_002t"] || data200[j]["m_002t"] == 0
                ? data200[j]["m_002t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_001p"] =
              data200[j]["m_001p"] || data200[j]["m_001p"] == 0
                ? data200[j]["m_001p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_002p"] =
              data200[j]["m_002p"] || data200[j]["m_002p"] == 0
                ? data200[j]["m_002p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_001q"] =
              data200[j]["m_001q"] || data200[j]["m_001q"] == 0
                ? data200[j]["m_001q"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_003qc"] =
              data200[j]["m_003qc"] || data200[j]["m_003qc"] == 0
                ? (data200[j]["m_003qc"] / 3.6).toFixed(1)
                : undefined;
          }
        }
      }
      let dataa = [];
      hpObjArr.map((item) => {
        dataa.push([
          '<span style="color:#DB181C;">' + item.name + "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_001t ? item.m_001t : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_002t ? item.m_002t : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_001q ? item.m_001q : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_003qc ? item.m_003qc : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_001p ? item.m_001p : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (item.m_002p ? item.m_002p : "-") +
            "</span>",
        ]);
      });

      let tmp_config = _.cloneDeep(_this.config);
      tmp_config.data = dataa;
      _this.config = tmp_config;
    },
  },
};
</script>
<style lang='scss'>
.dv-scroll-board {
  .header .header-item {
    // font-size: 40px;
    color: #53f3f3;
    font-size: var(--titlefont);
    white-space: normal;
    height: var(--px80i) !important;
    line-height: var(--px40i) !important;
    // padding: auto;
  }

  .rows {
    .ceil {
      white-space: normal;
      word-break: break-all;
      // height: var(--px80i) !important;
      line-height: var(--px40i) !important;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .row-item {
      font-size: var(--contentfont);
      // height: var(--px80i) !important;
      line-height: var(--px40i) !important;
    }
  }
}
</style>